/*
 * @Author: jiu yin
 * @Date: 2023-04-27 14:23:19
 * @LastEditTime: 2023-06-02 19:04:36
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \AI admin\src\view\intention\detail\index.tsx
 * jiu
 */
import { useState, useEffect } from 'react'
import { useParams, useSearchParams, useNavigate } from 'react-router-dom';

import { getParams } from "@/utils"
import { Space, Table, Tag, Tooltip, Modal, Button, Input, Switch, Form, } from 'antd';
import type { ColumnsType } from 'antd/es/table';

import './index.scss'
import { use } from 'i18next';


function Detail() {

  console.log(getParams());
  const [modal, contextHolder] = Modal.useModal();

  const SwitchOnchange = (checked: boolean) => {
    console.log(checked);
  }

  const [form] = Form.useForm();
  let navigate = useNavigate()
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    status: boolean
  }

  let statusArr = [] as any[]
  let statusStr = (<p>是否将该条信息从<a href="#"> 已开启 </a>状态变更为<a href="#"> 已停用 </a>？</p>)
  let statusStr1 = (<p>是否将该条信息从<a href="#"> 已停用 </a>状态变更为<a href="#"> 已开启 </a>？</p>)
  let statusStr2=(<p></p>)

  const SwitchOnchangeTable = (checked: boolean, item: any) => {
    console.log(`Switch checked: ${checked}`, item);
    statusArr = datas.map(i => {
      if (i.key === item.key) {
        return { ...i, status: checked }
      }
      return i
    })
    statusStr2=checked ? statusStr1 : statusStr
    statusChange();
  }



  //删除确认框 
  const confirm = () => {
    modal.confirm({
      title: '删除',
      content: '是否将该条规则从列表中删除？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        console.log("你确定要删除");
      },
    });
  };


  //状态变更确认框 
  const statusChange = async () => {
    await new Promise(resolve => setTimeout(resolve, 0));
    modal.confirm({
      title: '状态变更',
      content: statusStr2,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        setDatas(statusArr)
        console.log("你确定变更吗");
      },
    });
  };


  const columns: ColumnsType<DataType> = [
    {
      title: '规则序号',
      dataIndex: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '例句',
      dataIndex: 'address',
      render: (_, item) => (
        <>
          <Tooltip title={item.address}>
            <p className='tableP'>{item.address}</p>
          </Tooltip>
        </>
      ),
    },
    {
      title: '句式',
      dataIndex: 'address',
      render: (_, item) => (
        <>
          <Tooltip title={item.address}>
            <p className='tableP'>{item.address}</p>
          </Tooltip>
        </>
      ),
    },
    {
      title: '正则式',
      dataIndex: 'address',
      // width:30,
      render: (_, item) => (
        <>
          <Tooltip title={item.address}>
            <p className='tableP'>{item.address}</p>
          </Tooltip>
        </>
      ),
    },
    {
      title: '状态',
      key: 'status',
      render: (_, item) => (
        <>
          <Switch defaultChecked checked={item.status} onChange={(checked) => { SwitchOnchangeTable(checked, item) }} />
        </>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, item) => (
        <Space size="middle">
          <a href='#' onClick={() => setisModalOpenDetail(true)}>详情</a>
          <a href='#'>编辑</a>
          <a href='#' onClick={confirm}>删除</a>
        </Space>
      ),
    },
  ];

  const data: DataType[] = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park New York No. 1 Lake Park New York No. 1 Lake Park',
      status: false,
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      status: true,
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32348293478924789479141794671647842,
      address: 'Sydney No. 1 Lake Park',
      status: false,
    },

  ];

  const [datas, setDatas] = useState(data)

  let searchInit = { dim: "" }
  const [search, setSearch] = useState(searchInit)

  //弹框
  const [isModalOpen, setIsModalOpen] = useState(false);


  //弹框详情
  const [isModalOpenDetail, setisModalOpenDetail] = useState(false);

  //取消
  const cancel = () => {
    setIsModalOpen(false);
    form.resetFields();
  }

  //成功走得
  const onFinish = (values: any) => {
    console.log('Success:', values);
    // setIsModalOpen(false);
  };

  //失败走得
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
    // setIsModalOpen(false);
  };




  return (
    <div className='intentionDetail'>

      <div className='title'>
        <p className='p1'><span>播放视频</span> <span>Video_Description</span></p>
        <p className='p2'>
          <span className='switch'><Switch defaultChecked onChange={(checked) => { SwitchOnchange(checked) }} /></span>
          <Button type="primary">编辑</Button>
        </p>
      </div>


      <div className='intention'>

        <div className='title borderNone'>
          <Button type="primary" onClick={() => setIsModalOpen(true)}>+ 添加意图规则</Button>
          {/* <div className='search'>
            <Input placeholder="模糊搜索关键字" className='input' value={search.dim} onChange={(e) => setSearch({ ...search, dim: e.target.value })} />
            <Button type="primary" className='ml_10'>查询</Button>
            <Button className='ml_10' onClick={() => setSearch(searchInit)}>重置</Button>
          </div> */}
        </div>
        <Table columns={columns} dataSource={datas} />

        {/* 新增和编辑 */}
        <Modal title="添加意图规则" open={isModalOpen} onCancel={() => { cancel() }} keyboard footer={null}>


          <Form
            name="basic"
            labelCol={{ span: 6, offset: 2 }}
            wrapperCol={{ span: 100 }}
            style={{ maxWidth: 600, marginTop: "20px" }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            form={form}
          >
            <Form.Item
              label="例句"
              name="username"
              rules={[{ required: true, message: '请输入例句！' }]}
            >
              <Input.TextArea placeholder='请输入例句' />
            </Form.Item>

            <Form.Item
              label="句式"
              name="password1"
              rules={[{ required: true, message: '请输入句式！' }]}
            >
              <Input.TextArea placeholder='请输入句式' />
            </Form.Item>

            <Form.Item
              label="正则式"
              name="password11"
              rules={[{ required: true, message: '请输入正则式！' }]}
            >
              <Input.TextArea rows={4} placeholder='请输入正则式' />
            </Form.Item>


            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
              <Button htmlType="button" onClick={() => { cancel() }} className='ml_10'>
                取消
              </Button>
            </Form.Item>
          </Form>


        </Modal>



        {/* 意图详情弹框 */}
        <Modal title="意图规则详情" open={isModalOpenDetail} onCancel={() => { setisModalOpenDetail(false) }} keyboard footer={null}>

          <ul className='tableDetail'>
            <li><span>例句</span><p>观看_一部_[video_description]_视频</p></li>
            <li><span>句式</span><p>观看_一部_[video_description]_视频</p></li>
            <li><span>正则式</span><p>?:\S+)?(?:看看|看一看|视察|查看|游览|观光|欣赏|观赏|观看|感受|享受|见|看)(?:\S+)?(?:个|块|类型|类|次|部|段儿|段|遍|会儿|季|集)(\S+)(?:视频|mv|电影|MV|录像|影片|片子|片儿)</p></li>
          </ul>

        </Modal>

        {/* 删除确认对话框 */}
        {contextHolder}


      </div>


    </div>
  )
}

export default Detail
